<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 适配 移动设备 -->
    <title>年会抽奖</title>
    <style>
        .抽奖结果框 {
            width: 840px; /* 图片 宽高 */
            height: 420px;
            background: url(../素材/年会抽奖.jpg) no-repeat center / cover;
            /* 背景图多值写法: 图片路径       平铺方式,不平铺   背景图位置/缩放 */

            padding: 100px 250px; /* 内边距, 这里效果 文字在图片中间显示 */

            box-sizing: border-box; /*盒子尺寸: 內减模式,  防止 内外边距 设置可能撑大盒子*/

            margin: 0 auto; /* 版心居中 */
        }
    </style>
</head>
<body>
<div class="抽奖结果框">
    <strong>传智教育年会抽奖</strong>
    <h1>一等奖：<span id="一等奖">???</span></h1>
    <h3>二等奖：<span id="二等奖">???</span></h3>
    <h5>三等奖：<span id="三等奖">???</span></h5>
</div>

<script>
    // 声明数组, 原来存放要抽奖的姓名
    const 姓名数组 = ['孙新罡', '张岩', '张凯', '张航天', '安道华', '杜岩']

    // 封装一个 抽奖函数
    function 抽奖函数(姓名数组=[]) {
        for (let i = 0; i < 姓名数组.length; i++) {
            // 获取一个随机数, 用来作 数组下标
            let 随机数_下标 = Math.floor(Math.random() * 姓名数组.length)
            console.log(姓名数组[随机数_下标]) // 控制台输出, 测试看信息读取成功吗
            // 获取DOM元素
            const 数组对象_抽奖等级 = document.querySelectorAll('.抽奖结果框 span')
            // 依次 修改标签里的内容
            数组对象_抽奖等级[i].innerHTML = `${姓名数组[随机数_下标]}`
            // 删除 数组里已经抽的姓名,保证抽奖名单不会重复
            姓名数组.splice(随机数_下标, 1)
            console.log(姓名数组) // 控制台看信息, 验证是否正确删除
        }
    }

    // 调用函数, 并且传参
    抽奖函数(姓名数组)

</script>
</body>
</html>